<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>上网详情页frame</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<style>
			body {
				padding-bottom: 35px;
			}
			body .main {
				margin: 15px 15px 0;
				padding: 0 15px;
				height: 573.5px;
				border-radius: 15px;
				border: #C2C2C2 1px solid;
				-webkit-box-shadow: rgba(114,114,115,0.36) 0px 0px 8px;
				-moz-box-shadow: rgba(114,114,115,0.36) 0px 0px 8px;
				box-shadow: rgba(114,114,115,0.36) 0px 0px 8px;
				color: #919191;
				font-size: 14px;
			}
			body .main .font1 {
				font-size: 18px;
				color: #101010;
			}
			body .main .font2 {
				font-size: 15px;
			}
			body .main .item-style {
				border-bottom: #e6e6e6 1px solid;
				padding: 15px 0;
			}
			body .main .item-style-2 {
				text-align: right;
			}
			body .main .net-place-name {
				margin-top: 10px;
			}
			body .main .btn-content {
				text-align: center;
			}
			body .main .btn-style {
				border: #FF8000 1px solid;
				border-radius: 20px;
				width: 150px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 17px;
				color: #FF8000;
				outline:none;
			}
			body .main #btn-share {
				margin-top: 25px;
			}
			body .main #btn-recommend {
				margin-top: 15px;
			}
			body .main .tip-content {
				margin-top: 24.5px;
				font-size: 15px;
				color: #555555;
			}
			body .main .tip-recommend {
				height: 38.5px;
				width: 40px;
				vertical-align: middle;
				margin-right: 15px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="item-style flex-between-center">
				<div>
					本次上网时长：
				</div>
				<div id="con-time" class="font1">
					1h
				</div>
			</div>
			<div class="item-style flex-between-center">
				<div>
					剩余时长：
				</div>
				<div id="sur-time" class="font1">
					49h
				</div>
			</div>
			<!-- <div class="item-style flex-between-center">
			<div>
			本次结余流量：
			</div>
			<div id="" class="font1">
			49h
			</div>
			</div> -->
			<div class="item-style flex-between">
				<div>
					上网时间：
				</div>
				<div class="font2 item-style-2">
					<div id="start-time">
						2017.03.16&nbsp;&nbsp;14:00
					</div>
					<div id="start-place" class="net-place-name">
						星巴克(深圳学府路店)
					</div>
				</div>
			</div>
			<div class="item-style flex-between">
				<div>
					结束时间：
				</div>
				<div class="font2 item-style-2">
					<div id="end-time">
						2017.03.16&nbsp;&nbsp;14:00
					</div>
					<div id="end-place" class="net-place-name">
						星巴克(深圳学府路店)
					</div>
				</div>
			</div>
			<div class="btn-content" style="display: none;">
				<button id="btn-share" class="btn-style" style="display: none;">
					分&emsp;享
				</button>
				<div class="tip-content">
					<img class="tip-recommend" src="../image/icon_tip.png"/>推荐好友会获得50小时上网时长哦。
				</div>
				<button id="btn-recommend" class="btn-style">
					马上推荐
				</button>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript">
		var mData;
		apiready = function() {
			initData();
			initView();
		};
		function initData() {
			mData = api.pageParam;
		}

		function initView() {
			//分享
			var btnShare = document.getElementById('btn-share');
			;
			//推荐
			var btnRecommend = document.getElementById('btn-recommend');
			//持续时间
			var conTime = document.getElementById('con-time');
			//剩余时长
			var surTime = document.getElementById('sur-time');
			//开始时间
			var startTime = document.getElementById('start-time');
			//开始位置
			var startPlace = document.getElementById('start-place');
			//结束时间
			var endTime = document.getElementById('end-time');
			//结束位置
			var endPlace = document.getElementById('end-place');
			conTime.innerText = comJs.dataFaultTolerant(mData.continue_time);
			surTime.innerText = comJs.dataFaultTolerant(mData.sur_time);
			startTime.innerText = comJs.dataFaultTolerant(mData.y) + '.' + comJs.dataFaultTolerant(mData.md) + '  ' + comJs.dataFaultTolerant(mData.s_time);
			startPlace.innerText = comJs.dataFaultTolerant(mData.getNetmap);
			endTime.innerText = comJs.dataFaultTolerant(mData.y) + '.' + comJs.dataFaultTolerant(mData.md) + '  ' + comJs.dataFaultTolerant(mData.e_time);
			endPlace.innerText = comJs.dataFaultTolerant(mData.outNetmap);
			btnShare.onclick = function() {
				api.sendEvent({
	                name:'btnShare'
                });
			}
			btnRecommend.onclick = function() {
				api.sendEvent({
	                name:'btnRecommend'
                });
			}
		}
	</script>
</html>